<template>
  <div class="membercard-container">
    <div class="tables">
      <el-card>
        <el-card class="select-box">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="会员卡号">
              <el-input v-model="form.memberCode" placeholder="请输入会员卡号" class="query-input"></el-input>
            </el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form>
        </el-card>
        <el-table :data="tableData" style="width: 100%" border max-height="600">
          <el-table-column fixed prop="memberCode" label="会员卡号" width="150"></el-table-column>
          <el-table-column prop="memberName" label="姓名">
          </el-table-column>
          <el-table-column prop="cardTime" label="办卡时间" width="120">
          </el-table-column>
          <el-table-column prop="memberGender" label="性别" width="120">
          </el-table-column>
          <el-table-column prop="memberAge" label="年龄">
          </el-table-column>
          <el-table-column prop="memberPhone" label="联系方式" width="120">
          </el-table-column>
          <el-table-column prop="memberHeight" label="身高">
          </el-table-column>
          <el-table-column prop="memberWeight" label="体重">
          </el-table-column>
          <el-table-column prop="cardClass" label="购买课时">
          </el-table-column>
          <el-table-column prop="cardNextClass" label="剩余课时"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination :current-page="currentPage" :page-sizes="[10, 30, 60, 90]" :page-size="pageSize" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      tableData: [],
      form: {
        memberCode: null
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    handleClick(val) {
      this.getList()
    },
    getList() {
      request({
        url: '/gym-member/member/list',
        method: 'get',
        params: {
          memberCode: this.form.memberCode,
          pageNo: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        const data = res.data
        this.tableData = data.records
        this.currentPage = data.current
        this.total = data.total
        console.log(res);
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.membercard-container {
  .tables {
    padding: 10px;

    .select-box {
      .query-input {
        width: 300px;
        margin-right: 10px;
      }
    }

    .pagination {
      padding-top: 10px;
    }
  }
}
</style>
